<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				/*display: none;*/
				max-width: 100%;
			}
			img:nth-of-type(1){
				/*display: block;*/
			}
			.slide-fade-enter{			  
			  opacity: 0;
			}
			.slide-fade-enter-active {
			  transition: all 10s ease;
			}			
			/*淡出*/
			.slide-fade-leave-active {
			   transition: all 1.8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
			}
			.slide-fade-leave-active {
			   opacity: 0;
			}
		</style>
	</head>

	<body>
		<div id="body">
			<template v-for='(item,index) in imgs'>
				<transition name="slide-fade"  v-on:enter="enter(index)"  v-on:leave="leave(index)">
				    <img  v-bind:src='item' v-show='index==select' />
				  </transition>
			</template>
			 
			<!--<img src="img/index.jpg" v-show='isShow_1' alt="" />
			<img src="img/index2.jpg" v-show='isShow_2' alt="" />
			<img src="img/index3.jpg" v-show='isShow_3' alt="" />-->
			<!--<button @click='show = !show'>adsfadsf</button>
			<transition name="slide-fade">
			    <img  src="img/index.jpg" v-show='show' />
			  </transition>-->
		</div>

		<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
		<script src="../vue.min.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: '#body',
				data: {
					imgs:['img/index.jpg','img/index2.jpg','img/index3.jpg'],
					select:0,
					show:true
				},
				mounted: function() {
					this.CircleShow('a', 'hide', 'show', 1800, 'length', '')
				},
				methods: {
					CircleShow: function(imgs, hide, show, delay, length, i) {
						var this_ = this
						setTimeout(function() {
//							var now = this.select
							this.select = -1
//							setTimeout(function(){
//								this_.select = now+1
//							},1800)
						
						}.bind(this), delay)
					},
					enter:function(index){
						console.log(index)
						setTimeout(function(){
							this.select = -1
						},1000)
					},
					leave:function(index){
						console.log(index)
						this.select = index+1
					}
				}
			})
		</script>
	</body>

</html>